<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>光标聚焦和失焦事件</title>
	<style type="text/css">
		.text{
			color: red;
			font-size: 12px;
		}
	</style>
</head>
<body>
	<form action="">
		<p class="name">
			<label for="username">用户名：</label>
			<input type="text" name="user" id="username">

		</p>
		<p class="pwd">
			<label for="pwd">密码：</label>
			<input type="password" name="wpd" id="pwd">
		</p>
		<input type="submit" name="">
	</form>
	<script type="text/javascript">
		var userName = document.getElementById('username');
		var newNode = document.createElement('span');
		userName.onfocus = function(){
			newNode.innerHTML = '请输入用户名';
			newNode.setAttribute('class', 'text')
			userName.parentNode.appendChild(newNode);
		}
		userName.onblur = function(){
			newNode.innerHTML = '请输入正确的用户名';
			newNode.setAttribute('class', 'text')
			userName.parentNode.appendChild(newNode);
		}
	</script>
</body>
</html>